<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getOrderLiveListAPI } from "@/server/api/shopOrder";
import { useUseStore } from "@/stores/user";
import { getDayDifference } from "@/hook/days";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/*
 *&注册区
 */
const router = useRouter();
const useStore = useUseStore();
const loading = ref(false);
const finished = ref(false);
/*
 *&变量声明区
 */
const HotelList = ref([]); //列表数据
const stateIndex = ref(0); // 定义切换条件
const page = ref(1); //定义列表页数
const NavList = ref([
  { title: t("hotelList.wait") },
  { title: t("hotelList.finished") },
]); // 定义Nav导航栏数据

/*
 *&函数声明区
 */

// 定义 tab 切换方法
const tabList = async(index) => {
  // 数据归零
  page.value = 1;
  stateIndex.value = index;
  HotelList.value = [];
  finished.value = false;
  loading.value = true;
    // 调用获取数据的函数
  await getOrderLiveList(stateIndex.value, useStore.userId, 10, page.value);

  // 加载完成后，递增页码
  page.value++;
};

const onLoad = async () => {

  loading.value = true;  // 开始加载

  // 调用获取数据的函数
  await getOrderLiveList(stateIndex.value, useStore.userId, 10, page.value);

  // 加载完成后，递增页码
  page.value++;

  loading.value = false;  // 停止加载
};

// 定义获取列表函数
// 定义获取列表函数
const getOrderLiveList = async (Status, userId, Size, Page) => {
  try {
    // 调用 API 获取数据
    const res = await getOrderLiveListAPI(Status, userId, Size, Page);

    console.log(res); // 输出查看返回的数据
    // 处理返回的数据
    const newHotelList = res.data.data.list.map((item) => ({
      ...item,
      date: getDayDifference(item.startTime, item.endTime),
    }));
    HotelList.value.push(...newHotelList);

    // 设置加载状态和完成状态
    loading.value = false;

    // 判断是否已经加载完所有数据
    if (HotelList.value.length >= res.data.count || res.data.data.list.length < Size) {
      finished.value = true;
    } else {
      finished.value = false;
    }

  } catch (error) {
    console.error("获取数据失败:", error);
    loading.value = false; // 请求失败时停止 loading
  }
};
//判断订单状态
const judgeStatus = (status) => {
  if (status == 0) {
    return t("hotelList.wait")
  } else if (status == 1) {
    return t("hotelList.finished")
  }
  // else if (status == 2) {
  //   return t("hotelList.finished")
  // } else if (status == 3) {
  //   return "无效订单"
  // } else if (status == 4) {
  //   return t("shopSeller.uncomment")
  // }
}
//定义跳转详情页事件
const goDetail = (i) => {
  console.log(i);
  router.push({
    path: "Hotelchecked",
    query: {
      data: JSON.stringify(i),
    },
  });
};
</script>

<template>
  <div>
    <van-sticky>
      <top-button-list :title="''" />

      <div class="tab_list">
        <ul>
          <li v-for="(i, index) in NavList" :key="index" @click="tabList(index)"
            :class="{ active: stateIndex == index }">
            {{ i.title }}
          </li>
        </ul>
      </div>
    </van-sticky>

    <ul class="counter">
      <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('noMore')" @load="onLoad">
        <li v-for="(i, index) in HotelList" :key="index" @click="goDetail(i)">
          <div class="img">
            <div class="login">
              <img :src="i.userImage" alt="" />
            </div>
            <div class="detail">
              <!-- <img :src="i.imageList[0]" alt="" v-if="i.imageList" /> -->
              <img :src="i.avatarImag" alt="" v-if="i.imageList" />
            </div>
          </div>
          <div class="info">
            <div class="title">{{ i.shopName }}</div>
            <h3>{{ i.roomTypeName }}{{ judgeStatus(i.orderStatus) }}</h3>
            <p class="int">{{ i.address }}</p>
            <div class="timer">
              <!-- {{ i.startTime.slice(5, 10) + "/" + i.endTime.slice(5, 10) }} / -->
              {{ i.date }} 

              <div class="piy"><em> eCNY </em> {{ i.transactionAmount }}</div>
            </div>
          </div>
        </li>
      </van-list>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.tab_list {
  padding-top: 60rem;

  ul {
    background-color: #f5f5f5;
    display: flex;
    padding: 15rem 10rem;

    li {
      margin-left: 30rem;
      font-size: 15rem;
      position: relative;
      color: #ccc;
      font-weight: 600;

      &::after {
        position: absolute;
        bottom: -10rem;
        display: none;
        content: "";
        background-color: #642e8e;
        width: 20rem;
        height: 3rem;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10rem;
      }

      &:hover {
        color: #642e8e;

        &::after {
          display: block;
          color: #642e8e;
        }
      }

      &.active {
        color: #642e8e;

        &::after {
          display: block;
        }
      }
    }
  }
}

.counter {
  font-size: 14rem;
  padding: 10rem;

  li {
    display: flex;
    margin: 10px 0;

    .img {
      width: 30%;

      .login {
        width: 30rem;
        height: 30rem;
        border-radius: 50%;
        overflow: hidden;
      }

      .detail {
        margin-top: 10rem;
        width: 100%;
        height: 65%;
        border-radius: 10rem;
        overflow: hidden;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    min-height: 125rem;
    border-bottom: 1rem solid #eee;
    line-height: 24rem;
    padding-bottom: 10rem;

    .info {
      margin-left: auto;
      width: 60%;

      .title {
        font-size: 16rem;
        font-weight: 800;
        line-height: 30rem;
      }

      >h3 {
        margin-top: 20rem;
        font-weight: 550;
      }

      .int {
        font-size: 14rem;
      }

      .piy {
        float: right;
        color: #642e8e;
        font-size: 18rem;
        font-weight: 550;

        em {
          font-style: normal;
          font-size: 12rem;
        }
      }
    }
  }
}
</style>
